<template>
	<view>
		<up-navbar :title="$t('robot.bot')" :fixed="false">
			<template #left>
				<view></view>
			</template>
			<template #right>
				<view style="font-weight: 600;" @click="goPage('/pages/robot/my')">{{$t("robot.my")}}</view>
			</template>
		</up-navbar>
		<z-paging ref="paging" v-model="dataList" @query="queryList" :use-page-scroll="true" >
			<view class="item" v-for="item in dataList" @click="goPage('/pages/robot/involved?item=' + encodeURIComponent(JSON.stringify(item)))">
				<view class="title-box">
					<view>
						<image src="../../static/img/bot/us.png" style="width: 70rpx; height: 40rpx;margin-right: 6rpx;"></image>
						{{item.stakingCurrencyCode}}/{{item.stakingTwoCurrencyCode}}
					</view>
					<view class="btn-box">
						<text>{{$t("robot.involved")}}</text>
					</view>
				</view>
				<view class="info-box">
					<view class="need-pay">
						<view class="label-box">{{$t("robot.payment")}}</view>
						<view class="number-box">
							<view>{{item.stakingAmount}} {{item.stakingCurrencyCode}}</view>
							<view><text>≈{{item.stakingAmount}} {{item.stakingCurrencyCode}}</text>{{item.twoCurrencyAmount}} {{item.stakingTwoCurrencyCode}}</view>
						</view>
					</view>
					<view class="need-pay" style="margin-top: 20rpx;">
						<view class="label-box">{{$t("robot.day")}}</view>
						<view>
							<view>{{item.everyDayOutPut}} {{item.outPutCurrencyCode}}</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		
		
		<view class="bottom-box"></view>
		<tabbarVue :current="2"></tabbarVue>
	</view>
</template>

<script setup>
	import tabbarVue from '@/components/tabbar/index.vue'
	import { ref,watch } from 'vue';
	import { queryRobot} from '@/common/api/common.js'
	
	const paging = ref(null)
	const dataList = ref([])
	
	const queryList = (pageNo, pageSize) => {
		let params = {
			currencyCode: '',
			twoCurrencyCode: '',
			outPutCurrencyCode: '',
			page: pageNo - 1,
			pageSize: pageSize
		}
		queryRobot(params).then(res => {
			if(res.status == 0) {
				paging.value.complete(res.result.content);
			}else {
				paging.value.complete(false);
			}
		})
		
	}
	
	const goPage = (url) => {
		uni.navigateTo({
			url:url
		})
	}
</script>

<style>
	page{
		background-color: #ffffff;
	}
</style>
<style lang="scss" scoped>
	.item{
		width:calc(100vw - 80rpx);
		margin: 20rpx auto 0;
		background: #f5f5f5;
		border-radius: 16rpx;
		padding: 30rpx 40rpx;
		box-sizing: border-box;
		
		.title-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: bold;
			font-size: 30rpx;
			color: #1F1F1F;
			view{
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
			.btn-box{
				text{
					padding: 4rpx 20rpx;
					background: #1C5FFF;
					border-radius: 30rpx;
					font-weight: 400;
					color: #ffffff;
				}
			}
		}
		.info-box{
			background-color: #ffffff;
			border-radius: 16rpx;
			margin-top: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			.need-pay{
				display: flex;
				justify-content: space-between;
				.label-box{
					color: #1F1F1F80;
				}
				.number-box{
					text-align: right;
					text{
						color: #1F1F1F80;
						padding-right: 10rpx;
					}
				}
			}
		}
	}
	
	.bottom-box{
		height: calc(120rpx + env(safe-area-inset-bottom) + 40rpx);
	}
</style>